{% extends "kjs/rainbow/layouts/main.html" %}

{% block title %}
    分享我的精彩-惠软（kjssoft）
{% endblock %}

{% block common_css %}
    {{ block.super }}
    <style type="text/css">
        div#rainbow_body {
            background:url("{{ STATIC_URL }}commons/background/8f1f1_background.png") #f8f8ff;
            padding:20px;
            box-shadow:0 0 2px gray;
        }
        div#rainbow_body nav {
            padding:0 0 20px 0;
            border-bottom:2px solid #dcdcdc;
            margin-bottom:20px;
        }
        div#rainbow_body nav label {
            font-size:32px;
            font-weight:bold;
            color:#0769AD;
        }
        div#rainbow_image_publish_right {
            width:30%;
            float:right;
            background:url("{{ STATIC_URL }}commons/background/8f1f1_background.png") black;
            padding-top:20px;
            border:1px solid #f8f8ff;
        }
        div#rainbow_image_publish_left {
            width:70%;
        }

        label.rainbowTitle {
            font-size:24px;
            padding:10px 0;
        }
    </style>
{% endblock %}

{% block rainbow_body %}
    <div id="rainbow_body" class="centerContent">
        <nav>
            <label>发布图片</label>
        </nav>
        <div id="rainbow_image_publish_right">
            {% include "kjs/rainbow/frame/widgets/create/_image_right_widget.html" %}
        </div>
        <div id="rainbow_image_publish_left">
            {% include "kjs/rainbow/frame/widgets/create/_image_list_widget.html" %}
            {% include "kjs/rainbow/frame/widgets/create/_image_selector_widget.html" %}
            {% include "kjs/rainbow/frame/widgets/create/_image_style_widget.html" %}
            {% include "kjs/rainbow/frame/widgets/create/_image_comment_widget.html" %}
            <div id="rainbow_image_action_widget">
                <form action="" method="POST">
                    {% csrf_token %}
                    <div style="display:block;">
                        {% if form %}
                            {% for field in form %}
                                {{ field }}
                            {% endfor %}
                        {% endif %}
                    </div>
                </form>
                <div>
                    <button>
                        <a href="#">取消</a>
                    </button>
                    {% if form.fields.status.widget.choices %}
                        {% for choice in form.fields.status.widget.choices %}
                            {% if choice.1 == "VERIFYING" %}
                                <button class="rainbowFormSubmitButton">
                                    <label>保存</label>
                                    <input type="hidden" name="rainbow_image_scope" value="{{ choice.0 }}"/>
                                </button>
                            {% elif choice.1 == "DRAFT" %}
                                <button class="rainbowFormSubmitButton">
                                    <label>保存草稿</label>
                                    <input type="hidden" name="rainbow_image_scope" value="{{ choice.0 }}"/>
                                </button>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                </div>
            {{ form.errors }}
                <script type="text/javascript">
                    $(document).ready(function(){
                        var form = $("div#rainbow_image_action_widget").find("form");
                        $("button.rainbowFormSubmitButton").click(function(){
                            //获取image的值
                            var imgSelect = form.find("input#id_photos");
                            imgSelect.val("");
                            var imgLis = $("ul#rainbow_image_preview_item_list").find("li");
                            if ($.isEmptyObject(imgLis) || imgLis.size() == 0) {
                                return false;
                            }
                            var time = new Date().getTime();
                            var opt = $("<option/>");
                            var imgValueList = [];
                            for (var ls=0; ls<imgLis.size(); ls++) {
                                var imgLi = $(imgLis.get(ls));
                                var imgInfo = imgLi.find("div.rainbowImageInfo").inputHiddenDeserialization("rainbow_image_serialization");
                                var imgComment = imgLi.find("textarea[name='rainbow_image_comment']").val();
{#                                var val = imgInfo.id + "{{ form.PHOTO_COMMENT_SPLIT }}" + imgComment + "{{ form.PHOTO_COMMENT_SPLIT }}" + time;#}
                                var val = [imgInfo.id, imgComment, time];
{#                                var imgOption = opt.clone();#}
{#                                imgOption.attr({#}
{#                                    value:val,#}
{#                                    selected:"selected"#}
{#                                });#}
{#                                imgSelect.append(imgOption);#}
                                imgValueList.push(val);
                                time += 1000;
                            }
                            imgSelect.val(JSON.stringify(imgValueList));
                            //获取subject
                            form.find("input#id_subject").val($("input#rainbow_image_subject").val());
                            //获取comment
                            //TODO
                            var rainbowStatus = parseInt($(this).find("input[type='hidden']").val());
                            var statusSelect = form.find("select#id_status");
                            statusSelect.find("option").removeAttr("selected");
                            statusSelect.find("option[value='" + rainbowStatus + "']").attr("selected", "selected");
                            //获取label的值
                            var labelsSelect = form.find("input#id_labels");
                            labelsSelect.val("");
                            var labelsList = [];
                            var labelItems = $("div#rainbow_image_label").find("ul").find("li");
                            if (!$.isEmptyObject(labelItems) && labelItems.size() > 0) {
                                for (var i=0; i<labelItems.size(); i++) {
                                    var item = $(labelItems.get(i));
                                    var label = item.find("div").text();
                                    if (!$.isEmptyObject(label)) {
                                        labelsList.push(label);
{#                                        var l = opt.clone();#}
{#                                        l.attr({#}
{#                                            value:label,#}
{#                                            selected:"selected"#}
{#                                        });#}
{#                                        labelsSelect.append(l);#}
                                    }
                                }
                            }
                            labelsSelect.val(JSON.stringify(labelsList));
                            return form.submit();
                        });
                    });
                </script>
            </div>
        </div>
    </div>
{% endblock %}